<template>
  <view class="parent-container">
    <view class="table-container">
 <uni-table :data="props.dataList" border class="custom-table" style="width:100%">
        <uni-tr style="width:100%">
		  <uni-th style="font-size: 20rpx;" >日期</uni-th>
		  <uni-th style="font-size: 20rpx;" >编号</uni-th>
		  <uni-th style="font-size: 20rpx;">报警名称</uni-th>
		  <uni-th style="font-size: 20rpx;">报警数值</uni-th>
		  <uni-th style="font-size: 20rpx;" >当前数值</uni-th>
        </uni-tr>
		
      <uni-tr v-for="(item, index) in props.dataList" :key="index">
        <uni-td>
          {{ moment(new Date(item.createTime)).format("YYYY-MM-DD HH:mm:ss") }}
        </uni-td>
        <uni-td>{{ item.keyid }}</uni-td>
        <uni-td>
          {{ keyName(item.keyname,item.warnvalue,item.keyvalue) }}
        </uni-td>
        <uni-td>
          {{ item.warnvalue + labTable[item.tablename][item.columnname].unit }}
        </uni-td>
        <uni-td>
          {{ item.keyvalue + labTable[item.tablename][item.columnname].unit }}
        </uni-td>
      </uni-tr>
    </uni-table>
  </view>
    </view>
</template>

<script setup name="CallPoliceList">
import labTable from "@/mixins/table.json";
import moment from "moment";
import { defineProps, computed } from 'vue';

const props = defineProps({
  dataList: {
    type: Array,
  },
  height: {
    type: [Number, String],
  },

});

// 计算属性
const formatUnit = computed(() => {
  return (value) => typeof value === 'number' ? value + 'px' : value;
});

const keyName = computed(() => {
  return (str, warVal, keyVal) => {
    let strs = str;
    strs = str.replace("左", "左主机");
    strs = strs.replace("右", "右主机");
    if (keyVal > warVal) return strs + "高";
    if (keyVal < warVal) return strs + "低";
    return strs;
  };
});
</script>

<style scoped>
.parent-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  width: 100%;
  height: 80%; /* 假设父组件高度为视口高度 */
}

.table-container {
  width: 90%; /* 可根据需要调整宽度 */
  height: 100%;
  overflow-y: auto; /* 内容超出高度时显示垂直滚动条 */
}
</style>